<template>
  <t-form  class="form-container" ref="form" :data="formData" layout="inline">
    <t-row>
      <t-col :span="10">
        <t-row :gutter="[24, 24]">
          <t-col :span="4">
          <t-form-item label="合同编号">
            <t-input
              v-model="formData.no"
              placeholder="请输入合同编号"
              clearable
              @enter="handleSearch"
            />
          </t-form-item>
          </t-col>
          <t-col :span="4">
            <t-form-item label="合同名称">
              <t-input
                v-model="formData.name"
                placeholder="请输入合同名称"
                clearable
                @enter="handleSearch"
              />
            </t-form-item>
          </t-col>
          <t-col :span="4">
    <t-form-item label="合同类型">
      <t-select v-model="formData.contractType" placeholder="请选择合同类型" clearable>
        <t-option :value="1">采购合同</t-option>
        <t-option :value="2">销售合同</t-option>
        <t-option :value="3">服务合同</t-option>
      </t-select>
    </t-form-item>
          </t-col>
          <t-col :span="4">
    <t-form-item label="付款类型">
      <t-select v-model="formData.paymentType" placeholder="请选择付款类型" clearable>
        <t-option :value="1">一次性付款</t-option>
        <t-option :value="2">分期付款</t-option>
        <t-option :value="3">按进度付款</t-option>
      </t-select>
    </t-form-item>
          </t-col>
          <t-col :span="4">
    <t-form-item label="管理员姓名">
      <t-input
        v-model="formData.adminName"
        placeholder="请输入管理员姓名"
        clearable
        @enter="handleSearch"
      />
    </t-form-item>
          </t-col>
          <t-col :span="4">
    <t-form-item>
      <div class="button-container">
        <t-button theme="primary" @click="handleSearch">搜索</t-button>
        <t-button theme="primary" @click="handleAdd">新增</t-button>
        <t-button theme="default" @click="handleReset" style="margin-left: 8px">重置</t-button>
      </div>
    </t-form-item>
          </t-col>
        </t-row>
      </t-col>
    </t-row>
  </t-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const emit = defineEmits(['search','add']);

const formData = ref({
  no: '',
  name: '',
  contractType: undefined,
  paymentType: undefined,
  adminName: '',
});

const handleSearch = () => {
  emit('search', { ...formData.value });
};

const handleAdd = () => {
  emit('add');
};
const handleReset = () => {
  formData.value = {
    no: '',
    name: '',
    contractType: undefined,
    paymentType: undefined,
    adminName: '',
  };
  handleSearch();
};
</script>

<style lang="less" scoped>
.form-container {
  margin-top: -20px; /* 向上移动50px */
}

.t-form {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  margin-bottom: 16px;
}

.button-container {
  display: flex;
  justify-content: flex-end; /* 将内容靠右对齐 */
}
</style>
